<template>
  <div>
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        label="日期"
        width="180">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.date }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="姓名"
        width="180">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
            <p>姓名: {{ scope.row.name }}</p>
            <p>住址: {{ scope.row.address }}</p>
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.name }}</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">

          <el-select
            v-model="scope.row.acsProductId"
            multiple
            placeholder="请选择"
            @visible-change="handleVisibleChange($event, scope.$index)"
            class="custom-select"
            popper-class="select-popover-class"
            @change="selectedOptionsChange(scope.$index)"
          >

            <!-- 自定义内容 -->
            <template v-slot="dropdown" >
              <!-- 搜索框 -->
              <el-input
                ref="searchQueryRef"
                v-model="searchQuery"
                placeholder="请输入搜索内容"
                clearable
              >
                <el-button slot="append" icon="el-icon-search" @click="search" size="small" >搜索</el-button>
              </el-input>

              <!-- 滚动的选项区域 -->
              <div class="options-container">
                <el-checkbox
                  :value="checkboxValue"
                  :indeterminate="indeterminate"
                  @change="checkboxSelectAll"
                >全选</el-checkbox>
                <el-option
                  v-for="item in allOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
<!--                  这里用来回显 判断是否选中 -->
                  <el-checkbox :value="tableData[scope.$index].acsProductId.includes(item.value)" @change="itemCheckboxClick(item)" :label="item.label"></el-checkbox>
                </el-option>
              </div>

              <!-- 分页部分，固定到底部 -->
              <div class="pagination-container">
                <el-pagination
                  background
                  layout="prev, pager, next"
                  :current-page="currentPage"
                  :page-size="pageSize"
                  :total="total"
                  @current-change="handlePageChange"
                />
              </div>
            </template>
            <template slot="empty">
              <!-- 搜索框 -->
              <el-input
                v-model="searchQuery"
                placeholder="请输入搜索内容kong"
                clearable
              >
                <el-button slot="append" icon="el-icon-search" @click="search" size="small" >搜索</el-button>
              </el-input>
              <div v-if="selectedOptionsLoading">
                <i class="el-icon-loading"></i> 加载中...
              </div>
              <div v-else >没有查询到任何数据</div>
              <!-- 分页部分，固定到底部 -->
              <div class="pagination-container">
                <el-pagination
                  background
                  layout="prev, pager, next"
                  :current-page="currentPage"
                  :page-size="pageSize"
                  :total="total"
                  @current-change="handlePageChange"
                />
              </div>
            </template>
            <!-- 当 options 数组为空时，显示提示信息 -->
          </el-select>

        </template>
      </el-table-column>
    </el-table>


  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [{
        date: '2016-05-02',
        name: 'A',
        acsProductId:['value-1-1','value-1-2', 'value-1-3'],
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: 'B',
        acsProductId:['value-1-3'],
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: 'C',
        acsProductId:['value-1-2', 'value-1-3'],
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: 'D',
        acsProductId:['value-1-1', 'value-1-3'],
        address: '上海市普陀区金沙江路 1516 弄'
      }],




      //下拉框数据加载中
      selectedOptionsLoading: true,
      // selectedOptions: [],  // 已选择的选项
      selectedIndex: 0,  // 已选择的选项
      allOptions: [],       // 所有可选项
      total: 0,             // 总条目数
      currentPage: 1,       // 当前页数
      pageSize: 10,          // 每页显示条目数
      searchQuery: '',      // 搜索关键字
    };
  },
  create(){
  },

  computed:{

    //是否为全选状态
    checkboxValue() {
      if(this.tableData[this.selectedIndex].acsProductId.length && this.allOptions.length){
        for (let i = 0; i < this.allOptions.length; i++) {
          let allObj = this.allOptions[i];
          let allObjVal = allObj.value
          if(this.tableData[this.selectedIndex].acsProductId.includes(allObjVal)){
            //包含
          }else{
            //不包含
            return false;
          }
        }
        return true;
      }
      return false;
    },
    //是否为半选状态
    indeterminate() {
      if(this.tableData[this.selectedIndex].acsProductId.length && this.allOptions.length){
        let 是否存在包含 = false
        let 是否存在不包含 = false
        for (let i = 0; i < this.allOptions.length; i++) {
          let allObj = this.allOptions[i];
          let allObjVal = allObj.value
          if(this.tableData[this.selectedIndex].acsProductId.includes(allObjVal)){
            //包含
            是否存在包含 = true
          }else{
            //不包含
            是否存在不包含 = true
          }
        }
        if(是否存在包含 && 是否存在不包含){
          return true;
        }
      }
      return false;
    }
  },

  methods: {
    //下拉框选中的事件
    selectedOptionsChange(index){
      let acsProductId = this.tableData[index].acsProductId
      if(acsProductId && acsProductId.length){
        //去重
        const uniqueArr = [...new Set(acsProductId)];
        this.tableData[index].acsProductId = uniqueArr
      }
    },

    //单选框点击事件
    itemCheckboxClick(item){
      let val = item.value
      if(this.tableData[this.selectedIndex].acsProductId.includes(val)){
        //存在则删除
        let tmpSelectedOptions = []
        //取消选中
        for (let i = 0; i < this.tableData[this.selectedIndex].acsProductId.length; i++) {
          let selectObjVal = this.tableData[this.selectedIndex].acsProductId[i];
          if(val !== selectObjVal){
            //不存在则添加进去
            tmpSelectedOptions.push(selectObjVal);
          }
        }
        this.tableData[this.selectedIndex].acsProductId = tmpSelectedOptions;
      }else{
        //不存在则添加
        this.tableData[this.selectedIndex].acsProductId.push(val);
      }
    },
    checkboxSelectAll(bool) {
      // console.log('监听全选或反选事件', bool)
      if(this.allOptions.length<=0){
        return false;
      }
      if(bool){
        for (let i = 0; i < this.allOptions.length; i++) {
          let allObj = this.allOptions[i];
          let allObjVal = allObj.value;
          //判断是否已经选中了
          if(!this.tableData[this.selectedIndex].acsProductId.includes(allObjVal)){
            //不存在则添加进去
            this.tableData[this.selectedIndex].acsProductId.push(allObjVal)
          }
        }
      }else{
        let tmpSelectedOptions = []
        //取消选中
        for (let i = 0; i < this.tableData[this.selectedIndex].acsProductId.length; i++) {
          let selectObjVal = this.tableData[this.selectedIndex].acsProductId[i];
          let 是否存在 = false;
          for (let j = 0; j < this.allOptions.length; j++) {
            let allObjVal = this.allOptions[j].value
            if(allObjVal === selectObjVal){
              是否存在 = true
              break;
            }
          }
          if(是否存在 === false){
            //不存在则添加进去
            tmpSelectedOptions.push(selectObjVal);
          }
        }
        this.tableData[this.selectedIndex].acsProductId = tmpSelectedOptions;
      }
      return true;
    },

    重置参数(){
      // this.allOptions = [];
      // this.total = 0;
      this.currentPage = 1;
      this.searchQuery = '';
    },
    模拟调用接口返回数据(){
      //这里调用服务端接口, 将分页参数 以及搜索条件传过去
      let arr = []
      //模拟数据
      for (let i = 1; i <= this.pageSize; i++) {
        arr.push({value:"value-"+this.currentPage+'-'+i, label:"名称-"+this.currentPage + '-'+i})
      }
      let 模拟接口数据 = {total:100, data:arr};
      return 模拟接口数据;
    },
    //加载数据
    loadData(){
      let 模拟接口数据 = this.模拟调用接口返回数据()
      this.allOptions = 模拟接口数据.data
      this.total = 模拟接口数据.total;    // 更新总数
    },
    // 分页切换时触发
    handlePageChange(page) {
      this.currentPage = page;
      this.loadData();  // 更新当前页显示的数据
    },
    // 搜索功能处理
    search() {
      alert('点击搜索按钮')
      // this.loadData();

      this.allOptions = []
      this.total = 0;    // 更新总数

    },
    // 下拉框展开时触发
    handleVisibleChange(visible, index) {
      //改为当前选中的下标
      this.selectedIndex = index
      if (visible) {
        this.重置参数();

        //展开下拉框 光标焦点默认选中搜索input框
        //TODO 这里如果是异步加载 可以等数据加载完成之后 再执行这个方法
        this.$nextTick(() => {
          this.$refs.searchQueryRef.focus();
        });
        // alert('下拉框展开时触发')
        this.loadData();  // 模拟加载数据
      }else{
        // alert('下拉框关闭时触发')
      }
    }
  }
};
</script>

<style>
/* 覆盖 Element UI 的默认样式 */
.select-popover-class .el-select-dropdown__wrap {
  max-width: 98% !important;
  max-height: 100% !important; /* 使用 !important 确保优先级 */
  overflow-y: auto;
  margin-right: 0px;
}

.select-popover-class .el-select-dropdown__list {
  padding: 6px 10px !important;
}

.select-popover-class .scroll-wrapper {
  max-width: 100% !important;
  position: relative;
  max-height: 100% !important; /* 根据需要调整高度 */
  overflow: hidden; /* 隐藏滚动条 */
}


/* 控制全选按钮样式 */
.select-popover-class .el-scrollbar__view > .el-checkbox{
  padding: 5px 20px;
}

/* 取消多选框触发事件 */
.select-popover-class .el-scrollbar__view > li .el-checkbox {
  pointer-events: none;
}

/* 隐藏多选框选中勾选样式 √ */
.select-popover-class .el-scrollbar__view > li::after {
  display: none;
}
</style>

<style scoped>

/* 搜索框的样式 */
.el-input {
  width: 100%;
  margin-bottom: 10px;
}

/* 可滚动的选项区域 */
.options-container {
  width: 100%;
  max-height: 900px !important; /* 设置一个合适的高度来滚动 */
  overflow-y: auto;
}

/* 分页部分固定在底部 */
.pagination-container {
  position: relative;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 10px;
  border-top: 1px solid #ebeef5;
  background-color: #fff;
  text-align: center;
}
</style>
